<template>
  <div class="player" v-items="{ default: true }" @click="tools">
    <video
      controls
      crossorigin
      playsinline
      :poster="videoCover"
      id="plyr"
      :data-plyr-config="videoConfig"
    >
      <!-- Video files -->
      <source :src="data.src" type="video/mp4" />
      <!-- Caption files -->
      <track kind="captions" label="中文" :src="data.vvt" default />
    </video>
  </div>
</template>

<script>
import Plyr from 'plyr';
import '@/assets/css/plyr.css';
export default {
  computed: {
    videoConfig() {
      let playerConfig = this.playerConfig;
      let jsonConfig = JSON.stringify(playerConfig);
      return jsonConfig;
    }
  },
  props: {
    videoList: false, // 传递数组
    videoCaption: false, // 传递数组
    videoCover: false, // 图片链接
    data: false
  },
  created() {
    console.log(JSON.stringify(this.data));
  },
  data() {
    return {
      player: false,
      playerConfig: {
        debug: false,
        autoplay: true,
        ratio: '16:9',
        controls: [
          'play-large',
          'play',
          'progress',
          'current-time',
          'mute',
          'volume',
          'captions',
          'settings',
          'airplay',
          'fullscreen'
        ],
        settings: ['captions', 'quality', 'speed', 'loop'],
        fullscreen: { enabled: true, fallback: false, iosNative: false },
        previewThumbnails: { enabled: true },
        captions: { active: true, language: '中文', update: false }
      }
    };
  },
  mounted() {
    this.player = new Plyr('#plyr');
    this.fullScreen();
  },
  methods: {
    backPage() {
      console.log(111);
    },
    fullScreen() {
      this.player.fullscreen.enter();
    },
    playerPlay() {
      this.player.play();
    },
    serviceBack() {
      this.$router.go(-1); //默认将路由返回上一页
      //这里可以添加其他操作
    },
    tools() {
      this.player.togglePlay();
    }
  }
};
</script>

<style lang="less" scoped>
.player {
  width: 100% !important;
  height: 100% !important;
}
.player > video {
  width: 100% !important;
  height: 100% !important;
}
.focus {
  border-radius: 10px;
  border: 4px solid #55c2f7;
  box-shadow: 0px 0px 10px #5f8fe6 !important;
}
</style>
